<template>
	<view class="page">
		<!-- 未同意定位，则提示选择同意 -->
		<view v-if="!isALLowAddress" class="desktop_tip">
			<view class="up">▲</view>
			<view class="title">此页面需要位置信息，才可正常展示！<br>点击上方按钮，选择【设置】，位置信息选择允许</view>
		</view>
		<!-- 分享按钮 -->
		<view @click="share" class="pub_share2">分享</view>
		<view class="pub_sharebg" v-if="shareimg!=''" @tap="shareimg = ''">
			<!-- #ifdef APP-PLUS||MP-WEIXIN||MP-ALIPAY -->
			<image @longpress.stop="toSave" :src="shareimg" mode="widthFix"></image>
			<!-- #endif -->
		</view>
		<view class="fill">
			<image src="https://img.jinghushi.com/images/9/2025/01/GGpFYhnzntHpcQFqIydUGhizP1DIUB.png" mode="widthFix" class="bg"></image>
			<view class="f_position">
				<view class="f_head">
					<uni-icons type="back" color="#fff" size="16" @click="$navBack()"></uni-icons>
					<view class="f_tit">联盟卡专区</view>
					<view class="f_address">
						<uni-icons type="location"  color="#fff" size="16"></uni-icons>
						<view class="f_address_tit">{{address}}</view>
					</view>
				</view>
				<view class="search">
					<uni-search-bar radius="30" v-model="keywords" placeholder="搜索您想要的商品" clearButton="auto" cancelButton="none" @confirm="searchTap" @clear="clear"/>
				</view>
			</view>
		</view>
			<view class="vip_content" id="page_wp">
				<view class="cate" :class="{'nav_pos':isFixed}">
					<uni-icons type="back" color="#fff" size="16" v-show="isFixed" @click.stop="$navBack()">联盟卡专区</uni-icons>
					<scroll-view class="c_tag_list" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
						<view class="c_tag"  @click="changebigCate(0,0)" :class="{'c_tag_active':current==0}">全部</view>
						<view class="c_tag" v-for="(item,index) in cateList" :class="{'c_tag_active':current==item.id}" @click="changebigCate(item.id,index+1)">{{item.name}}</view>
					</scroll-view>
				</view>
			<!-- 	<view class="screen">
					<view class="screen_item screen_item_active">到店团购</view>
					<view class="screen_item">派送到家</view>
				</view> -->
				<view class="list">
					<view class="item" v-for="item in goodsList" @click="$navTo('/pages/product/groupbuy?id='+item.goodsid)">
						<view class="logo">
							<image :src="item.thumb"></image>
						</view>
						<view class="content">
							<view class="clamp">{{item.title}}</view>
							<view class="flex_between">
								<view class="butie">最高补贴{{Number(item.btrate)}}%</view>
								<view class="flex_align_center length">
									<image src="/static/index/dizhi.png"></image>{{item.distance}}
								</view>
							</view>
							<view class="price">
								<view>
									<text class="new"><text class="pub_small">￥</text>{{Number(item.saleprice)}}</text>
									<!-- <text class="pub_old">￥{{Number(item.marketprice)}}</text> -->
								</view>
								<view class="quota">可购：{{item.total}}</view>
							</view>
						</view>
						<view class="flex_align_center shop_info">
							<image :src="item.logo"></image>
							<view class="clamp">{{item.supname}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="vip_open" style="background-image: url('https://img.jinghushi.com/images/9/2024/06/f671OCl8c1abACjCfliPilLaP6C6I7.png');">
				<view class="vip_open_left">
					<view class="vip_tit">全国联盟免通卡</view>
					<view>此套餐仅限超级VIP使用</view>
				</view>
				<view class="vip_open_btn" @click="$navTo('/pages/user/flow')">立即开通</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif" ></image>
				<text v-if="isempty">没有更多了~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				isloading: false,
				isempty: false,
				cateList: [],
				goodsList: [],
				page:0,
				isFixed: false,
				current: 0,
				address: '',
				keywords: '',
				issearch: false,
				mid: -1,
				uid: -1,
				scrollLeft: 0,
				contentScrollW: 0, // 导航区宽度
				curIndex: 0, // 当前选中
				shareimg: '',
				isExecute: false,
				isALLowAddress: true,
			};
		},
		onPageScroll() {
			let query = uni.createSelectorQuery().in(this);
			query.select('#page_wp').boundingClientRect(data => {
				this.isFixed = data.top <= 0 ? true : false;
			}).exec();
		},
		async onLoad(options){
			if (options.scene) {
				let scene = decodeURIComponent(options.scene);
				this.uid = this.gup('uid', scene);
				this.mid = this.gup('mid', scene);
			}
			if(options.mid){
				this.mid = options.mid;
			}
			if(options.uid){
				this.uid = options.uid;
			}
			this.getLocation();
			await this.$onLaunched;
			this.getAllowAddress();
			if(!uni.getStorageSync('token')){
				this.getToken();
			}else{
				this.getCate()
			}
			this.getCity();
		},
		onReachBottom(){
			this.getList();
		},
		computed: {
			...mapState(['Location', ''])
		},
		methods: {
			getCate(){
				this.$axios('o2o/cate', 'POST', "shop").then(res => {
					if(res.data.code==200){
						this.cateList = res.data.data;
						this.getList();
						setTimeout(()=>{
							// 获取标题区域宽度，和每个子元素节点的宽度
							this.getScrollW()
						},1000)
					}
				})
			},
			getList(){
				this.isempty = false;
				this.isloading = true;
				this.page++;
				let obj = {
					...this.Location,
					...{
						page: this.page,
						cateid: this.current,
						uid: this.uid,
						keywords: this.keywords
					}
				}
				this.$axios('flowcard/lists', 'POST', "shop", obj).then(res => {
					this.isloading = false;
					if(res.data.code==200){
						this.goodsList = [...this.goodsList, ...res.data.data.list];
						this.isempty = res.data.data.list.length <= 0;
						if(!this.isExecute){
							if(res.data.data.uid!=0){
								this.getSharePath('/pages/user/vipShop?uid='+res.data.data.uid,true);
							}else{
								this.getSharePath();
							}
							this.isExecute = true;
						}
					}
				})
			},
			share() {
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				this.$axios('flowcard/sharepic', "POST", 'shop', this.Location).then(res => {
					if (res.data.code == 200) {
						this.shareimg = res.data.data.url
					}
					uni.hideLoading();
				})
			},
			toSave() {
				var that = this;
				uni.showModal({
					title: '图片保存',
					content: '确定要保存图片吗',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.shareimg,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								},
								fail(e) {
									console.log(e)
								}
							});
						}
					}
				});
			},
			getToken(){
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getCate();
							}
						})
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
				    scopes: 'auth_base',
				    success: res => {
						this.$axios('login/autologinAliPay','POST','member',{
							mid: this.mid,
							code: res.authCode
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getCate();
							}
						})
					}
				})
				// #endif
			},
			getAllowAddress(){
				let that = this;
				uni.getSetting({
					success:(res)=>{
						if(res.authSetting['scope.userLocation'] === false) {//初始化进入，从未授权
							that.isALLowAddress = false;
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									// 用户已手动授权
									console.log('用户已手动授权位置信息');
									that.isALLowAddress = true;
								},
								fail() {
									// 用户拒绝授权
									uni.showModal({
										title: '提示',
										content: '此页面需要获取您的位置信息，才可正常展示！请确认授权',
										success: function(modalRes) {
											if (modalRes.confirm) {
												uni.openSetting({
													success: function(settingRes) {
														if (settingRes.authSetting['scope.userLocation']) {
															// 用户在设置页手动授权成功
															console.log('用户在设置页手动授权成功');
															that.isALLowAddress = true;
															that.getLocation(true);
															uni.hideLoading();
														}
													}
												})
											}
										}
									});
								}
							})
						}
					}
				})
			},
			getLocation(isAllow=false){
				let that = this;
				// #ifdef MP-WEIXIN
				uni.startLocationUpdateBackground({
					type: 'gcj02',
					success() {
						uni.onLocationChange(function(res) {
							console.log('成功',res)
							that.$store.commit('upLocation', {
								x: res.longitude,
								y: res.latitude
							})
							uni.setStorageSync('x',res.longitude);
							uni.setStorageSync('y',res.latitude);
							that.$isResolve();
							if(isAllow){
								that.page = 0;
								that.goodsList = [];
								that.getList();
								that.getCity();
							}
						});
					},
					fail(err) {
						uni.startLocationUpdate({
							success: res => {
								uni.onLocationChange(function(res) {
									console.log('失败',res)
									that.$store.commit('upLocation', {
										x: res.longitude,
										y: res.latitude
									})
									uni.setStorageSync('x',res.longitude);
									uni.setStorageSync('y',res.latitude);
									that.$isResolve();
									if(isAllow){
										that.page = 0;
										that.goodsList = [];
										that.getList();
										that.getCity();
									}
								});
							},
							fail: err => {
								that.$isResolve();
							}
						});
					}
				});
				// #endif
				/* #ifdef MP-ALIPAY */
				uni.getLocation({
					type: '0',
					success:res=> {
						console.log('成功',res)
						that.$store.commit('upLocation', {
							x: res.longitude,
							y: res.latitude
						})
						uni.setStorageSync('x',res.longitude);
						uni.setStorageSync('y',res.latitude);
						that.$isResolve();
						if(isAllow){
							that.page = 0;
							that.goodsList = [];
							that.getList();
							that.getCity();
						}
					}
				});
				/* #endif */
			},
			changebigCate(id,index){
				if(this.current == id) return;
				this.current = id;
				this.page = 0;
				this.goodsList = [];
				this.curIndex = index;
				this.scrollLeft = this.cateList[index].left - this.contentScrollW / 2 + this.cateList[index].width / 2;
				this.getList();
			},
			getCity() {
				this.$axios('o2o/curAddress', 'POST', 'shop', this.Location).then(res => {
					if (res.data.code == 200) {
						this.address = res.data.data.address;
					}
				})
			},
			clear(){
				this.keywords = '';
				this.current = 0;
				this.page = 0;
				this.goodsList = [];
				this.getList();
			},
			searchTap() {
				if (this.keywords === '') {
					this.$api.msg('请输入搜索内容！');
					return;
				}
				this.current = 0;
				this.page = 0;
				this.goodsList = [];
				this.getList();
			},
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.c_tag_list').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
					console.log(this.contentScrollW)
				}).exec();
				query.selectAll('.c_tag').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.cateList[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.cateList[i].width = data[i].width
					}
				}).exec()
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8fe;
		padding-bottom: 200rpx;
	}
	.desktop_tip{
		height: auto;
		line-height: 40rpx;
		padding: 14rpx 20rpx 14rpx 0;
		background: #F0E1FF;
		top: calc(25px + 134rpx);
		font-size: 24rpx;
		.up{
			color: rgba(240,225,255,.8);
			font-size: 38rpx;
			top: -30rpx;
		}
	}
	.fill{
		position: relative;
		.bg{
			width: 100%;
		}
		.f_position{
			position: absolute;
			top: calc(var(--status-bar-height) + 50rpx);
			text-align: center;
			width: 100%;
			.f_head{
				display: flex;
				align-items: center;
				color: #fff;
				padding: 0 20rpx;
				.f_tit{
					font-size: 30rpx;
					margin: 0 10rpx;
				}
				.f_address{
					display: flex;
					align-items: center;
					margin-left: 10rpx;
					.f_address_tit{
						margin-top: -2rpx;
					}
				}
			}
			.search{
				width: 100%;
				left: 0;
				padding: 26rpx 20rpx;
				.uni-searchbar{
					padding: 0!important;
				}
			}
		}
	}
	.vip_content{
		background: #FBF8FE;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 24rpx;
		margin-top: -80rpx;
		position: relative;
		border-top: 1rpx solid #FBF8FE;
	}
	.cate{
		.c_tag_list{
			white-space: nowrap;
			padding: 0 0 26rpx;
			.c_tag{
				display: inline-block;
				color: #666;
				margin-right: 30rpx;
				font-size: 28rpx;
				position: relative;
			}
			.c_tag_active{
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				&::after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 2upx;
					transform: translateX(-50%);
					width: 100%;
					height: 8rpx;
					background: linear-gradient( 90deg, #BB2FF2 0%, #8615E1 100%);
					border-radius: 4rpx;
					opacity: .8;
				}
			}
		}
	}
	.screen{
		display: flex;
		margin-bottom: 20rpx;
		.screen_item{
			width: 122rpx;
			line-height: 38rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #999999;
			margin-right: 20rpx;
			text-align: center;
		}
		.screen_item_active{
			color: #8616E1;
		}
	}
	.nav_pos {
		background: #0c0a0a;
		position: fixed;
		top: 0;
		padding-top: calc(var(--status-bar-height) + 40rpx);
		width: 100%;
		z-index: 900;
		margin-left: -24rpx;
		margin-right: -24rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		.c_tag_list{
			padding-top: 24rpx;
			.c_tag{
				color: #fff;
			}
			.c_tag_active{
				color: #fff;
			}
		}
	}
	.list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.item{
			width: 340rpx;
			background: #fff;
			margin-bottom: 24rpx;
			border-radius: 12rpx;
			overflow: hidden;
			.logo{
				width: 100%;
				image{
					width: 100%;
					height: 342rpx;
				}
			}
			.content{
				padding: 5rpx 12rpx 10rpx;
				background: #fff;
				border-bottom: 2rpx solid #eee;
			}
			.price{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 4rpx;
				.new{
					font-size: 40rpx;
					// margin-right: 16rpx;
					color: #AF141D;
				}
				.quota{
					font-size: 20rpx;
					margin-top: 8rpx;
				}
			}
			.butie{
				color: $bg-color;
				font-weight: bold;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
			.length{
				margin-top: 10rpx;
				color: #999;
				font-size: 22rpx;
				image{
					width: 16rpx;
					height: 22rpx;
					margin-right: 4rpx;
				}
			}
			.shop_info{
				padding: 10rpx 20rpx;
				image{
					width: 50rpx;
					height: 50rpx;
					border-radius: 8rpx;
					border: 2rpx solid #eee;
				}
				.clamp{
					width: calc(100% - 50rpx);
					color: #616a66;
					font-size: 26rpx;
					padding-left: 10rpx;
				}
			}
		}
	}
	.vip_open{
		width: 698rpx;
		height: 132rpx;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		position: fixed;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 50rpx;
		.vip_open_left{
			flex: 1;
			color: #B9B7A7;
			font-size: 24rpx;
			image{
				width: 110rpx;
				margin-bottom: 6rpx;
			}
		}
		.vip_tit{
			color:#ffe9b5;
			font-size: 34rpx;
			font-weight: bold;
			margin-bottom: 12rpx;
		}
		.vip_open_btn{
			width: 176rpx;
			line-height: 62rpx;
			background: linear-gradient( 90deg, #FFE9B7 0%, #FBE3A0 100%);
			border-radius: 31rpx;
			color: #412116;
			font-weight: 600;
			text-align: center;
		}
	}
</style>
